<template>
  <footer class="footer">
    <div class="content">
      <!-- 注意 -->
      <div class="attention">
        <p>注意：这是一个仅用于学习的例子。</p>
      </div>
      <div class="footer-core">
        <div class="core">
          <h4 class="title">主题参考</h4>
          <ul class="core1-ul">
            <li><a href="https://vitejs.dev/" target="_blank">Vite</a></li>
            <li><a href="https://cn.vuejs.org/" target="_blank">Vue3</a></li>
            <li><a href="https://router.vuejs.org/zh/" target="_blank">Vue Router4</a></li>
            <li><a href="https://pinia.vuejs.org/" target="_blank">Pinia</a></li>
            <li><a href="https://element-plus.org/" target="_blank">Element-plus</a></li>
            <li><a href="https://developer.mozilla.org/" target="_blank">MDN</a></li>
          </ul>
        </div>
        <div class="core"></div>
        <div class="core"></div>
        <div class="core core4">
          <h4 class="title">微信联系</h4>
          <img class="wx" :src="WX_Myself" alt="wx">
        </div>
      </div>
      <!-- 版权信息 -->
      <div class="copyright">
        &copy;2023
        <address class="email">1057415350@qq.com</address>
        版权所有
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
  import WX_Myself from '@assets/images/footer/wx_myself.jpg'
</script>

<style lang="scss" scoped>
.footer {
  position: relative;
  width: 100%;
  min-height: 480px;
  padding: 60px 0;
  background: var(--bg-sub-color);
  .content {
    width: 1200px;
    margin: 0 auto;
    .attention {
      width: 100%;
      border-radius: 4px;
      font-size: 14px;
      color: var(--font-minor-color);
      background: var(--bg-minor-color);
      p {
        text-indent: 2em;
        line-height: 40px;
      }
    }
    .footer-core {
      display: flex;
      align-items: center;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--border-color);
      .core {
        flex: 1;
        display: flex;
        height: 300px;
        flex-direction: column;
        color: var(--font-minor-color);
        .title {
          position: relative;
          font-size: 18px;
          &::after {
            content: ' ';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 70px;
            height: 2px;
            background: var(--border-color);
          }
        }
        .core1-ul {
          margin: 0;
          padding: 0;
          li {
            list-style: none;
            line-height: 2;
          }
        }
        .wx {
          width: 200px;
          height: 200px;
        }
      }
      .core4 {
        justify-content: center;
        align-items: flex-end;
      }
    }
    .copyright {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60px;
      font-size: 12px;
      color: var(--font-minor-color);
      .email {
        margin: 0 5px;
        font-style: normal;
      }
    }
  }
}
</style>